// .demo-container {
//   padding: 20px;
//   display: flex;
//   flex-direction: column;
//   align-items: center;
//   gap: 20px;
// }

// .loading-box {
//   width: 30vw;
//   height: 50vh;
//   background-color: black;
//   color: white;
//   position: absolute;
//   top: 30vh;
// }

// .toggle-button {
//   padding: 8px 24px;
//   border-radius: 4px;
//   border: none;
//   font-size: 14px;
//   cursor: pointer;
//   transition: all 0.3s;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   min-width: 100px;
  
//   &.loading {
//     background-color: #e6f7ff;
//     color: #1890ff;
//     position: relative;
    
//     &::before {
//       content: '';
//       width: 14px;
//       height: 14px;
//       border: 2px solid #1890ff;
//       border-top-color: transparent;
//       border-radius: 50%;
//       margin-right: 8px;
//       animation: buttonSpin 1s linear infinite;
//     }
//   }
  
//   &:not(.loading) {
//     background-color: #1890ff;
//     color: white;
    
//     &:hover {
//       background-color: #40a9ff;
//     }
    
//     &:active {
//       background-color: #096dd9;
//     }
//   }
// }

// @keyframes buttonSpin {
//   0% { transform: rotate(0deg); }
//   100% { transform: rotate(360deg); }
// }

// .button-text {
//   display: inline-block;
//   min-width: 42px;
//   text-align: center;
// }



// // .container {
// //   max-width: 800px;
// //   margin: 0 auto;
// //   padding: 20px;
// // }

// // .button-group {
// //   display: flex;
// //   gap: 10px;
// //   margin-bottom: 20px;
// // }

// // button {
// //   padding: 8px 16px;
// //   border-radius: 4px;
// //   cursor: pointer;
// // }

// // .config-panel {
// //   border: 1px solid #eee;
// //   padding: 20px;
// //   border-radius: 4px;
// // }

// // .config-panel div {
// //   margin-bottom: 10px;
// // }

// // .container {
// //   max-width: 800px;
// //   margin: 0 auto;
// //   padding: 20px;
// // }

// // .demo-section {
// //   margin-bottom: 30px;
// //   padding: 20px;
// //   border: 1px solid #eee;
// //   border-radius: 4px;
// // }

// // .button-group {
// //   display: flex;
// //   gap: 10px;
// // }

// // button {
// //   padding: 8px 16px;
// //   border-radius: 4px;
// //   cursor: pointer;
// // }

// // .position-demo {
// //   display: grid;
// //   grid-template-columns: repeat(2, 1fr);
// //   gap: 20px;
// //   margin: 20px 0;
// // }

// // .trigger-demo {
// //   display: flex;
// //   flex-direction: column;
// //   gap: 20px;
// //   align-items: flex-start;
// // }

// // .hover-element {
// //   padding: 10px;
// //   background-color: #f5f5f5;
// //   border-radius: 4px;
// //   cursor: pointer;
// // }

// // .manual-controls {
// //   display: flex;
// //   gap: 10px;
// //   margin-top: 10px;
// // }


// .container {
//   max-width: 800px;
//   margin: 0 auto;
//   padding: 20px;
// }

// .demo-section {
//   margin-bottom: 30px;
//   padding: 20px;
//   border: 1px solid #eee;
//   border-radius: 4px;
// }

// button {
//   padding: 8px 16px;
//   border-radius: 4px;
//   cursor: pointer;
// }

// .form-group {
//   margin-top: 20px;
// }

div{
  width: 100px;
}